<!-- 年规 - 成员选择 -->
<template>
  <z-navbar title="成员列表" :border-bottom="true"></z-navbar>
  <view class="px-4 py-5 pb-20">
    <!-- 搜索框 -->
    <u-search v-model="state.searchKeyword" shape="square" :show-action="false" height="72" bg-color="#fff" color="#333"
      border-color="#F6F6F6" :input-style="searchInputStyle" placeholder-color="#999" placeholder="搜索用户"
      @search="loadData" @clear="loadData">
    </u-search>
    <template v-if="state.member?.management && state.member?.management?.length > 0">
      <!--社长管理员-->
      <view class="c-#999 text-28 my-3">社长、管理员({{ state.member?.management?.length || 0 }}人)</view>
      <view v-for="(item, index) in state.member?.management" :key="index" class="flex item-center" @click="onCheckChange(item)">
        <view class="flex-shrink-0 flex items-center">
          <u-checkbox :modelValue="isSelected(item.user_id)" shape="circle" active-color="#F4AF22" />
        </view>
        <view class="flex-1 flex items-center py-2">
          <u-image class="flex-shrink-0" :src="item.user?.avatar" width="60" height="60" border-radius="60" />
          <view v-if="item.member_position == 3" class="label-style ml-4" :class="`label-style${item.member_position}`">社长
          </view>
          <view v-else-if="item.member_position == 2" class="label-style ml-4"
            :class="`label-style${item.member_position}`">管理员</view>
          <view class="flex-1 c-#333 text-28">{{ item.user?.nickname || '' }}</view>
          <view v-if="isSelf(item.user_id)" class="flex-shrink-0 pl-2 text-28 c-#999">我</view>
        </view>
      </view>
    </template>
    <template v-if="state.member?.counselor && state.member?.counselor?.length > 0">
      <!--顾问-->
      <view class="c-#999 text-28 my-3">顾问({{ state.member?.counselor?.length || 0 }}人)</view>
      <view v-for="(item, index) in state.member?.counselor" :key="index" class="flex item-center" @click="onCheckChange(item)">
        <view class="flex-shrink-0 flex items-center">
          <u-checkbox :modelValue="isSelected(item.user_id)" shape="circle" active-color="#F4AF22" />
        </view>
        <view class="flex-1 flex items-center py-2">
          <u-image class="flex-shrink-0" :src="item.user?.avatar" width="60" height="60" border-radius="60" />
          <view class="label-style label-style2 ml-4">顾问</view>
          <view class="flex-1 c-#333 text-28">{{ item.user?.nickname || '' }}</view>
          <view v-if="isSelf(item.user_id)" class="flex-shrink-0 pl-2 text-28 c-#999">我</view>
        </view>
      </view>
    </template> 
    <template v-if="state.member?.member && state.member?.member?.length > 0">
      <!--成员-->
      <view class="c-#999 text-28 my-3">成员({{ state.member?.member?.length || 0 }}人)</view>
      <view v-for="(item, index) in state.member?.member" :key="index" class="flex item-center" @click="onCheckChange(item)">
        <view class="flex-shrink-0 flex items-center">
          <u-checkbox :modelValue="isSelected(item.user_id)" shape="circle" active-color="#F4AF22" />
        </view>
        <view class="flex-1 flex items-center py-2">
          <u-image class="flex-shrink-0" :src="item.user?.avatar" width="60" height="60" border-radius="60" />
          <view class="flex-1 ml-4 c-#333 text-28 text-maxline-1">{{ item.user?.nickname || '' }}</view>
          <view v-if="isSelf(item.user_id)" class="flex-shrink-0 pl-2 text-28 c-#999">我</view>
        </view>
      </view>
    </template>
  </view>
  <view class="bottom-wrap-16 w-full bg-#fff border-top px-4">
    <view class="button-save" @click="onSave">保存</view>
  </view>
</template>
<script setup>
import { useUserStore } from '@/store/user';
import { getMemberLists } from '@/common/http/module/society.js'
import { refreshPrePage } from '@/common/util/util';

const userStore = useUserStore()

const state = reactive({
  singleSelect: false,
  selectedIdList: [],
  oriList: [],
  searchKeyword: '',
  member: ''
});

const isSelf = computed(() => (user_id) => user_id == userStore.userInfo?.id)

const isSelected = computed(() => (user_id) => state.selectedIdList.findIndex(item => item == user_id) != -1)

const searchInputStyle = {
  borderRadius: "12rpx",
};

function loadData() {
  getMemberLists(userStore.currentSocietyId, state.searchKeyword).then(res => {
    const data = res.data

    if (!data) return
    if (!state.searchKeyword) {
      state.oriList = [...data.management, ...data.counselor, ...data.member]
    }

    if (state.selectedIdList.length > 0) {
      data.management?.forEach(item => {
        item.checked = state.selectedIdList.findIndex(id => id == item.user_id)
      })
      data.counselor?.forEach(item => {
        item.checked = state.selectedIdList.findIndex(id => id == item.user_id)
      })
      data.member?.forEach(item => {
        item.checked = state.selectedIdList.findIndex(id => id == item.user_id)
      })
    }
    state.member = data
  })
}

function onCheckChange(item) {
  const index = state.selectedIdList.findIndex(id => id == item.user_id)
  console.log('onCheckChange', item, index);
  if (index >= 0) {
    state.selectedIdList.splice(index, 1)
  } else {
    if (state.singleSelect) {
      state.selectedIdList = []
    }
    state.selectedIdList.push(item.user_id)
  }
}

function onSave () {
  const selectList = state.oriList?.filter(item => isSelected.value(item.user_id))
  refreshPrePage('onMemberChange', selectList)
  setTimeout(() => {
    uni.navigateBack()
  }, 500)
}

onLoad(options => {
  state.singleSelect = options.singleSelect || false
  const ids = decodeURIComponent(options.ids)
  if (ids) {
    state.selectedIdList = ids.split(',')
    console.log('ids', ids, state.selectedIdList);
  }
  loadData()
})
</script>

<style lang="scss" scoped>
.label-style {
  flex-shrink: 0;
  padding: 2rpx 10rpx;
  color: #fff;
  font-size: 20rpx;
  margin-right: 16rpx;
  border-radius: 6rpx;

  &3 {
    background-color: #F4AF22;
  }

  &2 {

    background-color: #6FC9E7;
  }

  &1 {
    background-color: #F8DC61;
  }
}

.button-save {
  height: 68rpx;
  border-radius: 5px;
  background-color: #F4AF22;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 28rpx;
}
</style>

